Ext.onReady(function(){
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    var productStore = new ScrumArrayStore({
        url: 'Backlog.aspx?action=getProductList',
        readerConfig: { type: 'json', recordType: [
            { name: 'id__c', mapping: 'id__c', type: 'int' },
            { name: 'name__c', mapping: 'name__c', type: 'string'}]
        },
        fields: ['abbr', 'state', 'nick']
    });
    var combo = new Ext.form.ComboBox({
        store: productStore,
        displayField: 'state',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText: 'Select a state...',
        selectOnFocus: true,
        applyTo: 'local-states'
    });
    productStore.load();
    var columns = [
        { id: 'name', header: 'Name', dataIndex: 'name__c', width: 200 },
        { header: 'Status', dataIndex: 'status', type: 'combo' },
        { header: 'Priority', dataIndex: 'priority', type: 'combo' },
        { header: 'Point', dataIndex: 'point', width: 50 },
        { header: 'Assignee', dataIndex: 'assignee', type: 'combo' },
        { header: 'Sprint', dataIndex: 'sprint__c', type: 'combo' },
        { header: 'Release', dataIndex: 'release__c', type: 'combo' },
        {header: 'Description', dataIndex: 'desc', width: 300}
    ];
    var recordType = [
        { name: 'id__c', mapping: 'id__c', type: 'int' },
        { name: 'name__c', mapping: 'name__c', type: 'string' },
        { name: 'status', mapping: 'status.value', type: 'string' },
        { name: 'priority', mapping: 'priority.value', type: 'string' },
        { name: 'point', mapping: 'point', type: 'int' },
        { name: 'assignee', mapping: 'assignee.display', type: 'string' },
        { name: 'sprint__c', mapping: 'sprint__c.display', type: 'string' },
        { name: 'release__c', mapping: 'release__c.display', type: 'string' },
        { name: 'product__c', mapping: 'product__c.display', type: 'string' },
        { name: 'desc', mapping: 'desc', type: 'string' },
        { name: 'objecttype', mapping: 'objecttype', type: 'string' }
    ];
    api = {
        read : 'Backlog.aspx?action=read', 
        create : 'Backlog.aspx?action=create',
        update  : 'Backlog.aspx?action=update', 
        destroy : 'Backlog.aspx?action=destroy',
    };
    var formConfig = { title: 'New Backlog',
        items: [{fieldLabel: 'First Name', name: 'first', allowBlank:false},
            {fieldLabel: 'Last Name',name: 'last'},
            {fieldLabel: 'Company',name: 'company'}, 
            {fieldLabel: 'Email',name: 'email',vtype:'email'}, 
            new Ext.form.TimeField({fieldLabel: 'Time',name: 'time',minValue: '8:00am',maxValue: '6:00pm'})
        ]
    };
    var expander = new Ext.ux.grid.RowExpander({
        tpl: new Ext.Template(
            '<p><b>Name:</b> {name}</p><br>',
            '<p><b>Description:</b> {desc}</p>'
        )
    });
    var gridPanel = new ScrumEditorGridPanel({ id: 'grid-panel',
        storeConfig: {proxyConfig: {api: api}, readerConfig: {recordType: recordType},writerConfig: {api: api}},
		cmConfig: {columns: columns},
		newPwConfig: {formConfig: formConfig},
		sm: new Ext.grid.RowSelectionModel({
			singleSelect:true,
			listeners: {
				selectionchange: function(sel){
				    var rec = sel.getSelected();
					if(rec){
					    Ext.getCmp('east-panel').body.update('<b><u>' + 'Name:' +rec.get('name') + '</u></b><br>'+ 'Description:' + rec.get('desc'));
					}
				}
			}
		}),
        plugins: expander,
    	viewConfig: {
    		forceFit:true,
    		enableRowBody:true,
    		showPreview:true,
    		getRowClass : function(record, rowIndex, p, ds){
    			if(this.showPreview){
    				p.body = '<p>'+record.data.excerpt+'</p>';
    				return 'x-grid3-row-expanded';
    			}
    			return 'x-grid3-row-collapsed';
    		}
        }
    });    
    var viewport = new DefaultScrumViewport({
        center : {title: 'Backlog List', gridPanel: gridPanel}
    });    
    // get a reference to the HTML element with id "hideit" and add a click listener to it 
    Ext.get("hideit").on('click', function(){
        // get a reference to the Panel that was created with id = 'west-panel' 
        var w = Ext.getCmp('west-panel');
        // expand or collapse that Panel based on its collapsed property state
        w.collapsed ? w.expand() : w.collapse();
    });	
});
